<html>

<head>
    <title>Tree Column</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
    <link rel="stylesheet" href="../assets/bootstrap-table/src/extensions/tree-column/bootstrap-table-tree-column.css">
    <link rel="stylesheet" href="../assets/examples.css">
    <script src="../assets/jquery.min.js"></script>
    <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
    <script src="../assets/bootstrap-table/src/extensions/tree-column/bootstrap-table-tree-column.js"></script>
    <script src="../ga.js"></script>
</head>

<body>
    <div class="container">
        <h1>Tree Column</h1>
        <p></p>
        <table id="table" class="table table-hover">
            <thead>
                <tr>
                    <th data-field="id">
                        ID
                    </th>
                    <th data-field="pid">
                        PID
                    </th>
                    <th data-field="name">
                        Item Name
                    </th>
                    <th data-field="price">
                        Item Price
                    </th>
                </tr>
            </thead>
        </table>
    </div>
    <script>
        var $table = $('#table');

        $(function() {
            $table.bootstrapTable({
                treeShowField: 'name',
                url: '../json/data7.json'
            });
        });
    </script>


</body>

</html>
